<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>购物网站</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
        integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="icon" href="./shop.ico" type="image/x-icon">
    <style>
        .footer {
            background-color: darkgrey;
            color: white;
        }

        .htop {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 5%;
            justify-content: space-around;
            width: 90%;

        }

        .top-text {
            flex-grow: 1;
            text-align: center;
        }

        .htop button {
            margin: 0 10px;
        }

        .hide {
            display: none;
        }

        .card-title {

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .card {
            overflow: hidden;
            width: 21%;
            margin: 15px 2%;
            padding: 3px;
        }

        .mycontainer {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            padding: 10px 0;
            margin: 0 10%;
            width: 80%;
        }


        .card:not(:nth-child(4n)) {
            margin-right: calc(4% / 3);
        }



        .barcon {
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .barcon1 {
            font-size: 17px;
            float: left;
            margin-top: 20px;
        }

        .barcon2 {
            float: right;
        }

        .barcon2 ul {
            margin: 20px 0;
            padding-left: 0;
            list-style: none;
            text-align: center;
        }

        .barcon2 li {
            display: inline;
        }

        .barcon2 a {
            font-size: 16px;
            font-weight: normal;
            display: inline-block;
            padding: 5px;
            padding-top: 0;
            color: black;
            border: 1px solid #ddd;
            background-color: #fff;
        }

        .barcon2 a:hover {
            background-color: #eee;
        }

        .ban {
            opacity: .4;
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="htop">
            <svg t="1638011009949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5735" width="32" height="32">
                <path d="M192.111 416.127h136.801v447.606H192.111zM661.28 416.127h136.77v447.606H661.28z" fill="#E3DCC8"
                    p-id="5736"></path>
                <path d="M529.726 565.87a75.09 75.346 0 1 0 150.18 0 75.09 75.346 0 1 0-150.18 0Z" fill="#E3DCC8"
                    p-id="5737"></path>
                <path
                    d="M411.355 702.894c-31.971 0-57.982-26.011-57.982-57.982v-21.32c0-31.971 26.011-57.982 57.982-57.982h34.215c31.971 0 57.982 26.011 57.982 57.982v21.32c0 31.971-26.011 57.982-57.982 57.982h-34.215z"
                    fill="#E3DCC8" p-id="5738"></path>
                <path
                    d="M380.144 475.724h96.636v141.708h-96.636zM636.596 602.87c-5.775 0-11.37-0.393-16.78-0.775-5.03-0.354-9.781-0.688-14.272-0.688-4.49 0-9.242 0.334-14.273 0.688-5.41 0.381-11.006 0.775-16.78 0.775-7.014 0-28.358 0-46.648-14.69-11.048-8.873-24.218-25.676-24.218-55.336 0-56.41 45.72-102.303 101.918-102.303 56.197 0 101.917 45.893 101.917 102.303 0 29.659-13.17 46.462-24.219 55.336-18.289 14.69-39.631 14.69-46.645 14.69zM185.609 986.228c-37.3 0-67.645-30.346-67.645-67.645V749.38c0-37.3 30.346-67.646 67.645-67.646h665.068c37.3 0 67.645 30.346 67.645 67.646v169.203c0 37.299-30.345 67.645-67.645 67.645H185.609z"
                    fill="#E3DCC8" p-id="5739"></path>
                <path
                    d="M895.422 529.753c-27.581 0-54.554-9.252-76.297-26.111-21.217 16.461-47.803 26.111-76.366 26.111-28.602 0-55.19-9.645-76.399-26.105a124.366 124.366 0 0 1-76.264 26.105c-28.568 0-55.115-9.699-76.302-26.137-21.79 16.917-48.555 26.137-76.362 26.137-28.58 0-55.142-9.711-76.332-26.158a124.382 124.382 0 0 1-76.332 26.158 124.449 124.449 0 0 1-76.357-26.179c-21.266 16.493-47.866 26.179-76.306 26.179-68.468 0-124.22-55.512-124.648-123.914l-0.043-0.501c-0.176-2.076-0.454-5.342-0.363-9.344-0.166-4.276 0.154-7.708 0.367-9.822 0.395-23.771 9.875-46.439 26.366-63.431l103.07-155.212c7.996-34.761 39.181-60.761 76.323-60.761h601.734c37.329 0 68.641 26.261 76.442 61.286l103.566 161.961a125.298 125.298 0 0 1 10.314 16.13l7.953 12.438v5.69c4.576 13.13 6.889 26.796 6.889 40.771-0.003 68.764-55.92 124.709-124.653 124.709z"
                    fill="#E3DCC8" p-id="5740"></path>
                <path
                    d="M240.429 466.841h40.165v350.971h-40.165V466.841zM709.597 466.841h40.134v350.971h-40.134V466.841z"
                    fill="#123752" p-id="5741"></path>
                <path
                    d="M604.816 541.239c14.786 0 26.771 12.101 26.771 27.028 0 14.927-11.986 27.028-26.771 27.028s-26.771-12.101-26.771-27.028c-0.001-14.927 11.985-27.028 26.771-27.028z"
                    fill="#FFE010" p-id="5742"></path>
                <path
                    d="M964.865 373.672c0 0.209-0.067 0.395-0.072 0.599 4.427 9.675 6.961 20.398 6.961 31.735 0 42.191-34.174 76.391-76.331 76.391-36.5 0-66.971-25.655-74.505-59.918a46.157 46.157 0 0 1-3.088-2.977c-6.378 35.741-37.524 62.894-75.071 62.894-37.65 0-68.858-27.303-75.116-63.191-0.704-0.761-1.428-1.503-2.08-2.313-5.292 37.018-37.015 65.504-75.468 65.504-39.041 0-71.18-29.349-75.727-67.194-0.327-0.448-0.7-0.856-1.01-1.317-3.942 38.488-36.43 68.511-75.927 68.511-39.044 0-71.187-29.356-75.727-67.205-0.506 0.676-0.982 1.374-1.517 2.026-5.431 36.86-37.078 65.179-75.419 65.179-38.053 0-69.51-27.896-75.293-64.349-0.807 0.92-1.619 1.835-2.489 2.695-6.865 35.132-37.765 61.654-74.882 61.654-42.158 0-76.333-34.2-76.333-76.391 0-3.248-0.697-6.427-0.304-9.57-0.439-2.524 0.253-5.103 0.253-7.755 0-13.512 5.977-25.602 15.395-33.855l112.068-168.761c0-16.579 13.428-30.016 29.991-30.016H814.91c16.564 0 29.991 13.438 29.991 30.016l110.433 172.701a76.515 76.515 0 0 1 8.073 12.625l1.458 2.282z"
                    fill="#F0E9E4" p-id="5743"></path>
                <path
                    d="M411.355 616.324h34.215c5.337 0 9.664 4.327 9.664 9.664v21.32c0 5.337-4.326 9.663-9.664 9.663h-34.215c-5.337 0-9.664-4.326-9.664-9.663v-21.32c0-5.337 4.327-9.664 9.664-9.664zM428.462 478.12v141.708M605.544 481.257c29.602 0 53.599 24.171 53.599 53.985s-23.997 20.244-53.599 20.244c-29.603 0-53.6 9.57-53.6-20.244 0-29.815 23.997-53.985 53.6-53.985z"
                    fill="#195875" p-id="5744"></path>
                <path
                    d="M185.609 732.448h665.068c10.674 0 19.327 8.653 19.327 19.327v169.204c0 10.674-8.653 19.327-19.327 19.327H185.609c-10.674 0-19.327-8.653-19.327-19.327V751.776c0-10.675 8.652-19.328 19.327-19.328z"
                    fill="#F5D472" p-id="5745"></path>
                <path
                    d="M279.74 152.69l-74.901 260.994s20.319 70.741 68.483 65.473 80.539-9.478 86.864-61.938c6.662-55.251 23.888-263.011 23.888-263.011L279.74 152.69zM512.099 159.504l1.259 254.381s31.498 84.243 82.553 70.815c51.054-13.428 77.761-54.983 74.62-67.55-3.142-12.567-34.61-261.693-34.61-261.693l-123.822 4.047z"
                    fill="#B7493C" p-id="5746"></path>
                <path
                    d="M734.817 160.861l81.232 268.093s43.443 62.751 79.645 57.924c36.202-4.827 95.333-56.717 68.784-111.021-26.548-54.304-142.396-214.996-142.396-214.996h-87.265zM313.575 814.433c12.431 0 23.358 3.296 32.78 9.885l13.936-22.537c-11.648-10.41-26.763-15.618-45.343-15.618-12.302 0-22.312 2.175-30.032 6.524-9.814 5.535-14.722 14.104-14.722 25.701 0 10.546 5.036 18.519 15.114 23.921 4.711 2.372 14.262 5.338 28.658 8.896 9.422 2.243 14.133 4.878 14.133 7.908 0 1.452-3.141 2.175-9.422 2.175-11.909 0-24.996-4.612-39.258-13.839l-14.722 26.096c17.927 11.732 35.985 17.595 54.176 17.595 10.468 0 19.497-2.304 27.088-6.919 9.422-5.536 14.133-13.375 14.133-23.526 0-19.109-13.023-32.289-39.061-39.539a3510.142 3510.142 0 0 0-18.844-4.547c0.394-1.45 4.187-2.176 11.386-2.176z m170.402-15.816c-9.686-8.303-22.641-12.455-38.865-12.455-11.517 0-24.275 3.231-38.276 9.687 0.393-7.38 2.812-18.846 7.263-34.399l-30.228-5.14c-6.938 31.369-10.403 55.355-10.403 71.961 0 17.926 3.729 38.881 11.188 62.867l29.836-6.722c-5.496-19.637-8.244-34.529-8.244-44.679 0-3.293 0.196-6.326 0.589-9.094 11.253-8.17 23.291-12.257 36.117-12.257 16.881 0 25.321 7.448 25.321 22.34 0 12.257-2.944 26.624-8.833 43.098l30.032 7.315c6.542-19.504 9.814-37.825 9.814-54.96-0.001-16.211-5.104-28.73-15.311-37.562z m132.126 0.198c-11.385-8.433-25.585-12.653-42.595-12.653-18.19 0-32.912 4.22-44.165 12.653-12.826 9.36-19.236 23.001-19.236 40.923 0 17.397 6.803 30.643 20.414 39.737 11.514 7.778 26.303 11.664 44.361 11.664 16.881 0 30.882-4.547 42.006-13.641 12.038-9.885 18.058-23.13 18.058-39.737 0-16.606-6.281-29.586-18.843-38.946z m-22.574 56.936c-5.367 3.429-12.17 5.14-20.414 5.14-7.852 0-14.593-1.646-20.218-4.942-6.674-3.688-10.011-9.159-10.011-16.409 0-7.642 2.944-13.573 8.833-17.793 5.232-3.688 11.842-5.536 19.825-5.536 8.373 0 15.439 1.582 21.199 4.745 7.195 4.087 10.796 9.885 10.796 17.397 0.001 7.647-3.336 13.445-10.01 17.398z m160.588-55.948c-10.992-9.094-24.996-13.641-42.006-13.641-12.562 0-23.751 2.966-33.565 8.896l0.785-4.152-28.069-4.942c-3.404 13.709-5.103 29.985-5.103 48.831 0 13.181 1.178 27.152 3.533 41.912 3.141 18.713 7.523 31.959 13.151 39.737l29.836-9.292c-2.748-6.197-5.76-14.432-9.029-24.712 9.029 5.801 19.301 8.699 30.817 8.699 16.224 0 29.64-4.479 40.239-13.443 11.253-9.619 16.881-22.272 16.881-37.958-0.001-16.869-5.825-30.179-17.47-39.935z m-20.807 54.762c-4.975 3.954-11.385 5.931-19.236 5.931-13.219 0-25.781-6.061-37.687-18.188v-12.455c4.447-3.688 10.403-6.787 17.862-9.292 7.588-2.502 14.329-3.756 20.218-3.756 7.327 0 13.348 1.649 18.058 4.942 5.364 3.824 8.048 9.227 8.048 16.211 0 7.384-2.423 12.919-7.263 16.607z"
                    fill="#B7493C" p-id="5747"></path>
                <path
                    d="M142.714 308.821l-2.505 3.911M196.187 228.251l-37.758 58.962M85.789 399.124s-6.739 62.223 60.57 53.644"
                    fill="#F0E9E4" p-id="5748"></path>
            </svg>
            <div style="margin-left: 20px">电商商城项目 </div>
            <div class="top-text">欢迎用户xxx,id:123456 </div>
            <button class="btn btn-success" id="open-cart">打开购物车</button>
            <button class="btn" id="btn-logout">注销</button>
            <button class="btn hide" id="btn-manage">管理页面</button>
        </div>
    </header>

    <div id="barcon" class="barcon">
        <div id="barcon1" class="barcon1"></div>
        <div id="barcon2" class="barcon2">
            <ul>
                <li><a href="###" id="firstPage">首页</a></li>
                <li><a href="###" id="prePage">上一页</a></li>
                <li><a href="###" id="nextPage">下一页</a></li>
                <li><a href="###" id="lastPage">尾页</a></li>
                <li><select id="jumpWhere">
                    </select></li>
                <li><button id="jumpPage" >跳转</button></li>
            </ul>
        </div>
    </div>

    <div class="content">
        <!-- content changes on each page -->
        <div class="mycontainer">
            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品1</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>
            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品2</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>
            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品3</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>
            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品4</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>
            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品5</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>
            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品6</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>

            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品7</h3>
                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>

            <div class="card">
                <a href="/product/detail?pid=1">
                    <h3 class="card-title">商品8</h3>

                </a>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="item.png" class="img-fluid" width="220" height="220">

            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <p class="text-xs-center">© Copyright info Xu Runji,SCUT <a href="mycard.html">我的名片</a></p>
        </div>
    </footer>


    <script>
        let userdata = {};
        let productlist = {};
        let productnum = 0;
        let currentPage = 1;
        let totalPage = 0;


        function getProduct(page) {
            $.ajax({
                url: "/product/getProduct",
                type: "POST",
                data: "page=" + page,
                dataType: "json",
                success: function (json) {
                    if (json.state == 200) {
                        console.log("=========>")
                        console.log(json.data);
                        productlist = json.data;

                        currentPage=page+1;

                        setProduct();

                    } else {
                        alert("获取商品信息失败！" + json.message);
                        $(".mycontainer").append("<h1>商品列表为空<h1>");
                        console.log("FALSE")
                    }
                },
                error: function (xhr) {
                    alert("获取商品信息失败！");
                    $(".mycontainer").append("<h1>商品列表为空<h1>");

                }
            });

        }

        function setProduct() {
            $(".mycontainer").empty();
            if (productlist.length == 0) {
                $(".mycontainer").append("<h1>商品列表为空<h1>");
            }

            var tempStr = "共" + productnum + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
            document.getElementById("barcon1").innerHTML = tempStr;

            for (let i = 0; i < productlist.length; i++) {
                str = "            <div class=\"card\">\n" +

                    "                <a href=\"/product/detail?pid=" + productlist[i].pid + "\">\n" +
                    "                    <h3 class=\"card-title\">" + productlist[i].name + "</h3>\n" +
                    "                </a>\n" +
                    "                <h6 class=\"card-subtitle text-muted\">￥" + productlist[i].price + "</h6>\n" +
                    "                <img src=\"" + productlist[i].image + "\" class=\"img-fluid\" width=\"220\" height=\"220\">\n" +
                    "\n" +
                    "            </div>";

                $(".mycontainer").append(str);
            }



            if (currentPage > 1) {
                $("#firstPage").on("click", function () {
                    goPage(1);
                }).removeClass("ban");
                $("#prePage").on("click", function () {
                    goPage(currentPage - 1);
                }).removeClass("ban");
            } else {
                $("#firstPage").off("click").addClass("ban");
                $("#prePage").off("click").addClass("ban");
            }

            if (currentPage < totalPage) {
                $("#nextPage").on("click", function () {
                    goPage(currentPage + 1);
                }).removeClass("ban")
                $("#lastPage").on("click", function () {
                    goPage(totalPage);
                }).removeClass("ban")
            } else {
                $("#nextPage").off("click").addClass("ban");
                $("#lastPage").off("click").addClass("ban");
            }

            $("#jumpWhere").val(currentPage);
        }

        $(document).ready(function () {

            $.ajax({
                url: "/users/getsession",
                type: "POST",
                dataType: "json",
                success: function (json) {
                    if (json.state == 200) {
                        console.log("=========>")
                        console.log(json.data);
                        userdata = json.data;
                        if (json.data.username == "admin") {
                            $("#btn-manage").removeClass("hide");
                            console.log("true");
                        }
                        else {
                            console.log("非admin");
                        }
                        $(".top-text").html("欢迎用户" + json.data.username + ",uid:" + json.data.uid);
                    } else {
                        alert("获取用户信息失败！" + json.message);
                        console.log("FALSE")
                    }
                }
            });

            $.ajax({
                url: "/product/getProductNum",
                type: "POST",
                dataType: "json",
                success: function (json) {
                    if (json.state == 200) {

                        productnum = json.data;


                        if (productnum / 8 > parseInt(productnum / 8)) {
                            totalPage = parseInt(productnum / 8) + 1;
                        } else {
                            totalPage = parseInt(productnum / 8);
                        }

                        var tempStr = "共" + json.data + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
                        document.getElementById("barcon1").innerHTML = tempStr;
                        var tempOption = "";
                        for (var i = 1; i <= totalPage; i++) {
                            tempOption += '<option value=' + i + '>' + i + '</option>'
                        }
                        $("#jumpWhere").html(tempOption);


                    } else {
                        alert("获取商品信息失败！" + json.message);
                    }
                }
            });


            getProduct(0);
        })
        $("#open-cart").click(function () {
            location.href = "cart.html";
        })

        $("#btn-manage").click(function () {
            location.href = "manage.html";
        })

        $("#btn-logout").click(function () {

            $.ajax({
                url: "/users/logout",
                type: "POST",
                dataType: "json",
                success: function (json) {
                    if (json.state == 200) {
                        alert("注销成功！");
                        location.href = "login.html";
                        console.log(json.data);
                    } else {
                        alert("注销失败！" + json.message);
                        console.log("FALSE")
                    }
                }
            });
        });



        $("#jumpPage").click(function () {
            var num = parseInt($("#jumpWhere").val());
            console.log(num);
            if (num != currentPage) {
                goPage(num);
            }
        });


        function goPage(page){
            if(currentPage==page)return;
            if(totalPage<page){
                console.log(page);
                alert("跳转失败，页数过大");
                return;
            }
            if(page<1){
                alert("跳转失败，页数过小");
                return;
            }
            getProduct(page-1);



        }


        function jumpPage() {


        }
    </script>
</body>

</html>